<template>
  <div>
      <div>
          我是user
          <div class="user-list">
              <router-link style="padding: 0 5px;" :to="{path: '/user/' + item.tip + '/' + item.id, query: {info: 'follow'}}" v-for="(item,index) in userList" :key="index">{{item.userName}}</router-link>
          </div>
      </div>
      <div v-if="userInfo.userName" class="user-info">
          <p>姓名：{{userInfo.userName}}</p>
          <p>性别：{{userInfo.sex}}</p>
          <p>爱好：{{userInfo.hobby}}</p>
      </div>
      <div class="info-list" v-if="userInfo.userName">
          <!-- query查询字符串 ?key=value的形式来拼接 -->
          <router-link exact to="?info=follow">他的关注</router-link>
          <router-link exact :to="{path: '', query: {info: 'share'}}">他的分享</router-link>
          <div>
              <!-- 路由对象中的query查询参数 -->
              URL查询参数：{{$route.query}}
          </div>
      </div>
  </div>
</template>

<script>
// 引入写好的数据
import data from '@/data.js';
export default {
    // data必须是函数
    data(){
        return {
            userList: data,
            userInfo: {},
        }
    },
    // 组件生命周期钩子函数created，在编译之前，只会调用一次(复用当前组件，这个函数不会再次被调用了)
    created(){
        // 我们打印路由信息对象(地址变化后会生成新的$route对象)
        console.log(this.$route);
        // 在$route.params下就可以拿到动态路由的参数
        // console.log(this.$route.params);

        this.getId();
    },
    methods: {
        getId(){
            let id =  this.$route.params.userId;
            if(id){
                this.userInfo = this.userList.filter((item) => {
                    return item.id == id
                })[0]; 
            }else {
                this.userInfo = {};
            }
        }
    },
    // 监听
    watch: {
        // 监听路由信息对象，路径发生变化，$router会被重新赋值，并且会执行这里的函数
        $route: function(){
            this.getId();
        }
    }
}
</script>

<style scoped lang="less">
    .info-list {
        font-size: 20px;
        margin: 10px;
    }
</style>


